<template>
  <div class="content">
    <div class="filter-wrap">
      <div class="box-flex">
        <div class="flex">
          <zx-form-group :title="$t('CURRENCY')">
            <zx-select :place="$t('CURRENCY_PLACE')" v-model="coinType" class="boxShadow">
              <zx-option value=''>{{'ALL'|t}}</zx-option>
              <zx-option :value="item.coin_no" v-for='(item,key) of allCoinTypeList' :key='key'>{{item.coin_core}}</zx-option>
            </zx-select>
          </zx-form-group>
        </div>
        <div class="flex">
          <zx-form-group :title="$t('TYPE')">
            <zx-select :place="$t('TYPE_PALCE')" v-model="entrustType" class="boxShadow">
              <zx-option value="">{{'ALL'|t}}</zx-option>
              <zx-option value="0">{{'BUY'|t}}</zx-option>
              <zx-option value="1">{{'SELL'|t}}</zx-option>
            </zx-select>
          </zx-form-group>
        </div>
      </div>
    </div>
    <ul class="manage-list">
      <li class="manage-item boxShadow" v-for='(item,key) of dataList' :key='key'>
        <div class="item-top border-b">
          <div class="top-left">
            <span class="btn red" v-if="item.entrustType=='0'">{{'BUY'|t}}</span>
            <span class="btn success" v-else>{{'SELL'|t}}</span>
          </div>
          <div class="item-right">{{item.dateFormatDate}}</div>
        </div>
        <div class="item-desc">
          <p class="item-desc-text">
            <span>{{'CURRENCY'|t}}：</span>
            <span class="c-primary">{{item.coinCore}}</span>
          </p>
          <p class="item-desc-text">
            <span>{{'ADVERT_PRICE'|t}}：</span>
            <span class="c-primary">{{item.entrustPrice}}{{item.coinCore}}</span>
          </p>
          <p class="item-desc-text">
            <span>{{'PREMIUM_RATIO'|t}}：</span>
            <span>{{item.entrustRange*100}}%</span>
          </p>
          <p class="item-desc-text">
            <span>{{'ENTRUST_NUMBER'|t}}</span>
            <span>{{item.entrustNum}}</span>
          </p>
          <p class="item-desc-text">
            <span>{{'MINIMUN_LIMIT'|t}}：</span>
            <span>{{item.entrustMinPrice}}{{item.coinCore}}</span>
          </p>
          <p class="item-desc-text">
            <span>{{'MAX_LIMIT'|t}}：</span>
            <span>{{item.entrustMaxPrice}}{{item.coinCore}}</span>
          </p>
        </div>
      </li>
    </ul>
    <div v-infinite-scroll="getDataList" infinite-scroll-disabled="loading" infinite-scroll-distance="10"></div>
    <zx-no-data v-model='showNoDataBool'></zx-no-data>
  </div>
</template>
<script>
  import { Form, Func, Auth } from '@/providers';
  import { C2c, Coins } from '@/services';
  export default {
    data() {
      return {
        entrustType: '',
        coinType: '',
        allCoinTypeList: [],
        showNoDataBool: false,
        pageSize: 1,
        loading: false,
        dataList: []
      };
    },
    methods: {
      // 删除数据
      async deleteItem(item) {
        try {
          let res = await C2c.DelSpotEntrust({
            userNo: Auth.getItem('userId'),
            token: Auth.getItem('token'),
            entrustNo: item.id
          });
          Form.Totas(res.desc, () => {
            this.getDataList();
          });
        } catch (error) {
          console.log(error);
        }
      },
      async GetAllCoinType() {
        try {
          let res = await Coins.GetAllCoinType({
            token: Auth.getItem('token')
          });
          this.allCoinTypeList = res.data;
        } catch (error) {
          console.log(error);
        }
      },
      // 获取列表
      async getDataList() {
        if (this.loading) { return false; };
        this.loading = true;
        try {
          let res = await C2c.GetSpotEntrustByUserNo({
            coinNo: this.coinType,    // 币种,全部的话为""
            userNo: Auth.getItem('userId'),
            token: Auth.getItem('token'),
            entrustState: '2',  // 0：委托中，1：已成交，2：已撤销，3：匹配中(等待付款)，4：确认收款  5:纠纷 "":全部
            entrustType: this.entrustType,   // 0为查询收购广告，1为查询出售广告
            receivablesType: 4,   // 交易方式   1:银行卡 2:支付宝 3:微信  4全部
            pageSize: this.pageSize, // 第几页
            lineSize: 10 // 每页有多少数据
          });
          this.dataList = [...this.dataList, ...res.data.dtoList];
          if (res.data.dtoList.length >= 10) {
            this.loading = false;
          }
          this.pageSize++;
          this.showNoDataBool = res.data.dtoSize == 0 ? true : false;
        } catch (error) {
          console.log(error);
        }
      }
    },
    watch: {
      coinType(val) {
        this.pageSize = 1;
        this.loading = false;
        this.dataList = [];
        this.getDataList();
      },
      entrustType(val) {
        this.pageSize = 1;
        this.loading = false;
        this.dataList = [];
        this.getDataList();
      }
    },
    created() {
      this.GetAllCoinType();
      this.getDataList();
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/sass/manage.scss";
</style>